<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="chart-name" content="微信基础图表">
    <title>统计</title>
    <link rel="stylesheet" href="src/main/resources/static/wechat/css/YmDAMEQVbLJpVbKiRQVX.css" />
</head>
<body>

<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="src/main/resources/static/wechat/js/f2.min.js"></script>

<script src="src/main/resources/static/wechat/js/jquery-3.2.1.min.js"></script>
<!-- 在 PC 上模拟 touch 事件 -->
<script src="src/main/resources/static/wechat/js/NjNldKHIVQRozfbAOJUW.js"></script>

<div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
</div>

<!--主提组件-->
<div class="bd">
    <th:block th:each="pageComponent:${pageComponents}">
        <th:block th:switch="${pageComponent.type}">
            <!--搜索框模块-->
            <th:block th:case="search">
                <div class="weui-search-bar" style="position: fixed;width: 100%;z-index: 500">

                    <!--输入框-->
                    <div class="weui-search-bar__form ">
                        <div class="weui-search-bar__box">
                            <i class="weui-icon-search"></i>
                            <input th:name="${pageComponent.getColumnsString()}" class="weui-search-bar__input"
                                   placeholder="搜索">
                            <a href="javascript:" class="weui-icon-clear"></a>
                        </div>
                        <label class="weui-search-bar__label"
                               style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                            <i class="weui-icon-search"></i>
                            <span>搜索</span>
                        </label>
                    </div>
                    <a href="javascript:" class="weui-search-bar__cancel-btn">取消</a>

                    <th:block th:each="child:${pageComponents}">
                        <th:block th:if="${child.type == 'detail_search'}">
                            <!--过滤器-->
                            <a class="fas fa-filter weui-search-bar__detail open-popup" style="line-height: 32px"
                               data-target="#test"></a>
                            <div id="test" class="weui-popup__container popup-bottom" style="margin-bottom: 50px">
                                <div class="weui-popup__overlay"></div>
                                <div class="weui-popup__modal">
                                    <div class="toolbar">
                                        <div class="toolbar-inner">
                                            <a href="javascript:;" class="picker-button close-popup">关闭</a>
                                            <a href="javascript:;"
                                               class="picker-button__left weui-search-detail__btn">搜索</a>
                                            <h1 class="title">过滤器</h1>
                                        </div>
                                    </div>
                                    <div class="modal-content">
                                        <form>
                                            <div class="weui-cells" style="background: #EFEFF4">
                                                <th:block th:each="column:${child.columns}">
                                                    <th:block th:switch="${column.editType}">
                                                        <!--选择列表-->
                                                        <div th:case="choose_list"
                                                             class="weui-cell weui-cell_select weui-cell_select-after">
                                                            <div class="weui-cell__hd">
                                                                <label for="" th:text="${column.describe}"
                                                                       class="weui-label">国家/地区</label>
                                                            </div>
                                                            <div class="weui-cell__bd">
                                                                <select class="weui-select"
                                                                        th:name="${column.name}">
                                                                    <option value="">无限制</option>
                                                                    <option th:each="col:${column.data}"
                                                                            th:value="${col.get('id')}"
                                                                            th:text="${col.get(column.getLinkColumn().name)}">中国
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <!--数字列表-->
                                                        <div th:case="number" class="weui-cell">
                                                            <div class="weui-cell__hd"><label
                                                                    th:text="${column.describe}" class="weui-label">qq</label>
                                                            </div>
                                                            <div class="weui-cell__bd">
                                                                <input th:name="${column.name}" class="weui-input"
                                                                       type="number" pattern="[0-9]*"
                                                                       placeholder="请输入数字">
                                                            </div>
                                                        </div>

                                                        <!--日期列表-->
                                                        <div th:case="date" class="weui-cell">
                                                            <div class="weui-cell__hd"><label
                                                                    th:text="${column.describe}" for=""
                                                                    class="weui-label">日期</label></div>
                                                            <div class="weui-cell__bd">
                                                                <input th:name="${column.name}" class="weui-input"
                                                                       type="date" value="">
                                                            </div>
                                                        </div>

                                                        <!--开关列表-->
                                                        <div th:case="switch" class="weui-cell weui-cell_switch">
                                                            <div th:text="${column.describe}" class="weui-cell__bd">
                                                                标题文字
                                                            </div>
                                                            <div class="weui-cell__ft">
                                                                <input th:name="${column.name}" class="weui-switch"
                                                                       type="checkbox">
                                                            </div>
                                                        </div>

                                                        <!--选择列表-->
                                                        <div th:case="select"
                                                             class="weui-cell weui-cell_select weui-cell_select-after">
                                                            <div class="weui-cell__hd">
                                                                <label for="" th:text="${column.describe}"
                                                                       class="weui-label">国家/地区</label>
                                                            </div>
                                                            <div class="weui-cell__bd">
                                                                <select class="weui-select"
                                                                        th:name="${column.name}">
                                                                    <option value="">无限制</option>
                                                                    <option th:each="col:${column.data}"
                                                                            th:value="${col.get('id')}"
                                                                            th:text="${col.get(column.getLinkColumn().name)}">中国
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <!--文本列表-->
                                                        <div th:case="text" class="weui-cell">
                                                            <div class="weui-cell__bd">
                                                                <input th:name="${column.name}" class="weui-input"
                                                                       type="text"
                                                                       th:placeholder="${column.describe}">
                                                            </div>
                                                        </div>
                                                    </th:block>
                                                </th:block>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </th:block>
                    </th:block>
                </div>
                <div class="weui-flex" style="z-index: 200;height: 48px">
                    <div class="weui-flex__item">
                        <div class="placeholder">weui</div>
                    </div>
                </div>
            </th:block>
            <!--表格模块-->
            <div th:case="table" class="weui-cells">
                <th:block th:switch="${table.dispalyType}">
                    <!--带说明的文字组件-->
                    <th:block th:case="instruction_list">
                        <div th:each="item:${pageComponent.data}" class="weui-cell">
                            <div class="weui-cell__bd">
                                <p th:text="${item.get(pageComponent.columns.get(0).name)}">标题文字</p>
                            </div>
                            <div th:text="${item.get(pageComponent.columns.get(1).name)}" class="weui-cell__ft">
                                说明文字
                            </div>
                        </div>
                    </th:block>
                    <!--带说明、跳转的组件-->
                    <th:block th:case="instruction_jump_list">
                        <a th:each="item:${pageComponent.data}" class="weui-cell weui-cell_access"
                           href="javascript:;">
                            <div class="weui-cell__bd">
                                <p th:text="${item.get(pageComponent.columns.get(0).name)}">cell standard</p>
                            </div>
                            <div th:text="${item.get(pageComponent.columns.get(1).name)}" class="weui-cell__ft">
                                说明文字
                            </div>
                        </a>
                    </th:block>
                    <!--跳转组件-->
                    <th:block th:case="jump_list">
                        <a th:each="item:${pageComponent.data}" class="weui-cell weui-cell_access"
                           href="javascript:;">
                            <div class="weui-cell__bd">
                                <p th:text="${item.get(pageComponent.columns.get(0).name)}">cell standard</p>
                            </div>
                            <div class="weui-cell__ft">
                            </div>
                        </a>
                    </th:block>
                    <!--带图标、文字、说明的组件-->
                    <th:block th:case="img_list">
                        <div th:each="item:${pageComponent.data}" class="weui-cell weui-cell_example">
                            <div class="weui-cell__hd"><img
                                    th:src="${item.get(pageComponent.columns.get(0).name)}"
                                    alt="" style="width:20px;margin-right:16px;display:block"></div>
                            <div class="weui-cell__bd">
                                <p th:text="${item.get(pageComponent.columns.get(1).name)}">标题文字</p>
                            </div>
                            <div th:text="${item.get(pageComponent.columns.get(2).name)}" class="weui-cell__ft">
                                说明文字
                            </div>
                        </div>
                    </th:block>
                    <!--带图标说明文字的跳转组件-->
                    <th:block th:case="img_jump_list">
                        <a th:each="item:${pageComponent.data}" class="weui-cell weui-cell_access weui-cell_example"
                           href="javascript:;">
                            <div class="weui-cell__hd"><img
                                    th:src="${item.get(pageComponent.columns.get(0).name)}"
                                    alt="" style="width:20px;margin-right:16px;display:block"></div>
                            <div class="weui-cell__bd">
                                <p th:text="${item.get(pageComponent.columns.get(1).name)}">cell standard</p>
                            </div>
                            <div th:text="${item.get(pageComponent.columns.get(2).name)}" class="weui-cell__ft">
                                说明文字
                            </div>
                        </a>
                    </th:block>
                    <!--联系人列表组件-->
                    <th:block th:case="contact_list">
                        <div th:each="item:${pageComponent.data}" class="weui-cell">
                            <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                                <img th:src="${item.get(pageComponent.columns.get(0).name)}"
                                     style="width: 50px;display: block">
                            </div>
                            <div class="weui-cell__bd">
                                <p th:text="${item.get(pageComponent.columns.get(1).name)}">联系人名称</p>
                                <p th:text="${item.get(pageComponent.columns.get(2).name)}"
                                   style="font-size: 13px;color: #888888;">摘要信息</p>
                            </div>
                        </div>
                    </th:block>
                    <!--文章组件-->
                    <th:block th:case="article">
                        <article th:each="item:${pageComponent.data}" class="weui-article">
                            <h1 th:text="${item.get(pageComponent.columns.get(0).name)}">大标题</h1>
                            <section>
                                <h2 th:text="${item.get(pageComponent.columns.get(1).name)}" class="title">
                                    章标题</h2>
                                <section>
                                    <h3 th:text="${item.get(pageComponent.columns.get(2).name)}">1.1 节标题</h3>
                                    <p th:text="${item.get(pageComponent.columns.get(3).name)}">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                        consequat.
                                    </p>
                                </section>
                            </section>
                        </article>
                    </th:block>
                </th:block>
            </div>
        </th:block>
    </th:block>
</div>

<script>
    //基础折线图
    var data = [{
        date: "2017-06",
        value: 116
    }, {
        date: "2017-07",
        value: 129
    }, {
        date: "2017-08",
        value: 135
    }, {
        date: "2017-09",
        value: 83
    }, {
        date: "2017-10",
        value: 125
    }];
    var chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio //指定分辨率
    });
    //加载数据
    chart.source(data, {
        value: {
            tickCount: 5,
            min: 0
        },
        date: {
            type: 'timeCat',
            range: [0, 1],
            tickCount: 3
        }
    });
    chart.tooltip({  //提示信息显示
        custom: true,
        showXTip: true,
        showYTip: true,
        snap: true,
        crosshairsType: 'xy',
        crosshairsStyle: {
            lineDash: [2]
        }
    });
    chart.axis('date', { //自定义xy轴
        label: function label(text, index, total) {
            var textCfg = {};
            // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
            if (index === 0) {
                textCfg.textAlign = 'left';
            } else if (index === total - 1) {
                textCfg.textAlign = 'right';
            }
            return textCfg;
        }
    });
    chart.line().position('date*value'); //数据映射
    chart.render(); //图形渲染
</script>

<script>
    //基础饼图
    var map = {
        '芳华': '40%',
        '妖猫传': '20%',
        '机器之血': '18%',
        '心理罪': '15%',
        '寻梦环游记': '5%',
        '其他': '2%'
    };
    var data = [{
        name: '芳华',
        percent: 0.4,
        a: '1'
    }, {
        name: '妖猫传',
        percent: 0.2,
        a: '1'
    }, {
        name: '机器之血',
        percent: 0.18,
        a: '1'
    }, {
        name: '心理罪',
        percent: 0.15,
        a: '1'
    }, {
        name: '寻梦环游记',
        percent: 0.05,
        a: '1'
    }, {
        name: '其他',
        percent: 0.02,
        a: '1'
    }];
    var chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio
    });
    chart.source(data, { //计算当前角度所占百分比
        percent: {
            formatter: function formatter(val) {
                return val * 100 + '%';
            }
        }
    });
    chart.legend({ //图例，对描述数据进行说明
        position: 'right',
        itemFormatter: function itemFormatter(val) {
            return val + '  ' + map[val];
        }
    });
    chart.tooltip(false);
    chart.coord('polar', {
        transposed: true,
        radius: 0.85
    });
    chart.axis(false);
    chart.interval().position('a*percent').color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']).adjust('stack').style({
        lineWidth: 1,
        stroke: '#fff',
        lineJoin: 'round',
        lineCap: 'round'
    }).animate({
        appear: {
            duration: 1200,
            easing: 'bounceOut'
        }
    });
    chart.render();

</script>

<script>
    var data = [{
        year: '1951 年',
        sales: 38
    }, {
        year: '1952 年',
        sales: 52
    }, {
        year: '1956 年',
        sales: 61
    }, {
        year: '1957 年',
        sales: 145
    }, {
        year: '1958 年',
        sales: 48
    }];
    var chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio
    });

    chart.source(data, {
        sales: {
            tickCount: 5
        }
    });
    chart.tooltip({
        showItemMarker: false,
        onShow: function onShow(ev) {
            var items = ev.items;
            items[0].name = null;
            items[0].name = items[0].title;
            items[0].value = '¥ ' + items[0].value;
        }
    });
    chart.interval().position('year*sales');
    chart.render();
</script>

<script>
    var data = [{
        item: 'Design',
        user: '用户 A',
        score: 70
    }, {
        item: 'Design',
        user: '用户 B',
        score: 30
    }, {
        item: 'Language',
        user: '用户 A',
        score: 70
    }, {
        item: 'Language',
        user: '用户 B',
        score: 50
    }, {
        item: 'Technology',
        user: '用户 A',
        score: 70
    }, {
        item: 'Technology',
        user: '用户 B',
        score: 40
    }];
    var chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio
    });

    chart.coord('polar');
    chart.source(data, {
        score: {
            min: 0,
            max: 120,
            nice: false,
            tickCount: 4
        }
    });
    chart.tooltip({
        custom: true, // 自定义 tooltip 内容框
        onChange: function onChange(obj) {
            var legend = chart.get('legendController').legends.top[0];
            var tooltipItems = obj.items;
            var legendItems = legend.items;
            var map = {};
            legendItems.map(function(item) {
                map[item.name] = _.clone(item);
            });
            tooltipItems.map(function(item) {
                var name = item.name;
                var value = item.value;
                if (map[name]) {
                    map[name].value = value;
                }
            });
            legend.setItems(_.values(map));
        },
        onHide: function onHide() {
            var legend = chart.get('legendController').legends.top[0];
            legend.setItems(chart.getLegendItems().country);
        }
    });
    chart.axis('score', {
        label: function label(text, index, total) {
            if (index === total - 1) {
                return null;
            }
            return {
                top: true
            };
        },
        grid: {
            lineDash: null,
            type: 'arc' // 弧线网格
        }
    });
    chart.axis('item', {
        grid: {
            lineDash: null,
        }
    });
    chart.line().position('item*score').color('user');
    chart.point().position('item*score').color('user').style({
        stroke: '#fff',
        lineWidth: 1
    });
    chart.render();
</script>



</body>
</html>
